<template>
	<view class="container">
		<u-navbar title="作品详情" bgColor="rgba(255,255,255,1)" leftIconColor="#000"
			titleStyle="color:#000;font-weight: bold;"></u-navbar>
		<view class="detail" :style="{ position: 'absolute', top: sHeight }">
			<view class="detail-title flex justify-start align-center">
				<image style="width: 96rpx;height: 96rpx;border-radius: 50%;" src="http://shejihm.oss-cn-beijing.aliyuncs.com/202404081716451712567805660400ddad8.png"
					mode=""></image>
				<view class="info flex flex_clm justify-btw align-start">
					<text>{{ detailInfo.name }}</text>
					<text></text>
				</view>
			</view>
			<view class="detail-content">
				<!-- <u-parse :content="detailInfo.content" ></u-parse> -->
				<mp-html
					:content="detailInfo.content" 
					:tag-style="{
					  div: 'white-space: pre-wrap;',
					  span: 'white-space: pre-wrap;',
					  p: 'white-space: pre-wrap;',
					  img: 'margin:0;width:100%;max-width: 100%;'
					}" 
				/>
			</view>
			<!-- 底部占位 -->
			<view style="height: 130rpx;"></view>
		</view>
		<view class="bottom_btn">
			<view class="addCar flex_content_center flex_items_center" @tap.stop="askPrice()">咨询画图报价</view>
		</view>
		
		<u-modal
			v-model="conShow" 
			content="确认打开客服会话？" 
			@confirm="openCustomLink()"
			:show-cancel-button="true"
			confirmText="确认"
			cancelText="取消"
		></u-modal>
	</view>
</template>

<script setup>
	import {
		getCurrentInstance,
		onMounted,
		ref,
		computed
	} from 'vue';
	import {
		onLoad,
		onUnload,
		onShow
	} from "@dcloudio/uni-app"
	const {
		proxy
	} = getCurrentInstance()
	const sHeight = ref('')
	const detailId = ref('')
	const detailInfo = ref({})
	const pageTitle = ref('')
	const pid = ref('')
	const link = ref('')
	const conShow = ref(false)

	onLoad((options)=>{
		pid.value = options.id
		getStatusHeight();
		getLink()
		getList();
	})
	// 获取客服链接
	function getLink(){
		proxy.api.system({code:'kf_link'}).then(res=>{
			link.value = res?.data?.data.find(item=>item.code=='askPrice_link')?.dictValue
		})
	}
	// 计算距离顶部安全高度
	function getStatusHeight() {
		sHeight.value = uni.getSystemInfoSync().statusBarHeight + 44 + 'px';
	}
	// 获取作品详情
	function getList() {
		// this.detailInfo.messageContent = "<p style=\"color:red\">这是测试的假数据</p><div>这是一个div</div>"
		proxy.api.worksDetail({
			id: pid.value
		}).then(res => {
			detailInfo.value = res.data.data
			// detailInfo.value.content = detailInfo.value.content.replace(/"/g, '\\"')
			console.log(detailInfo.value.content)
		})
	}
	function openCustomLink(){
		if (proxy.utils.isLogin()) {
			if(!link.value){
				proxy.tui.toast('客服链接未配置')
				return
			}
			wx.openCustomerServiceChat({
				extInfo: {
					url: link.value
				},
				corpId: 'ww591e8d883d4208fd', // 如果需要的话  
				success(res) {
					uni.showToast({
						title: '客服会话已成功打开',
						icon: 'none',
						duration: 2000
					})
				},
				fail(err) {
					console.log(err)
					uni.showToast({
						title: '打开客服会话失败',
						icon: 'none',
						duration: 2000
					})
				}
			});
		}
	}
	// 咨询画图报价
	function askPrice() {
		conShow.value = true
	}
</script>

<style lang="scss">
	.container {
		border-top: 1rpx solid #f4f4f4;
		width: 100%;
		background-color: #fff;

		.detail {
			width: calc(100vw - 40rpx);
			box-sizing: border-box;
			margin-left: 20rpx;

			&-title {
				margin-top: 10rpx;
				.info {
					margin-left: 28rpx;
					// margin-top: 20rpx;

					&>text:first-child {
						@include str(36rpx, bold, #333);
						line-height: 50rpx;
					}

					&>text:last-child {
						@include str(26rpx, 500, #999);
						line-height: 37rpx;
					}
				}
			}

			&-content {
				word-wrap: break-word;
				margin-top: 30rpx;

				text {
					@include str(28rpx, 400, #666666);
					letter-spacing: 2rpx;
				}
			}

			&-footer {
				margin-top: 60rpx;

				text {
					margin-top: 5rpx;
					@include str(28rpx, 400, #999999);
				}
			}
		}

		.bottom_btn {
			background-color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 12rpx 30rpx 33rpx 30rpx;
			box-shadow: 0rpx -3rpx 20rpx rgba(0, 0, 0, 0.06);
			z-index: 999;

			.addCar {
				width: 100%;
				line-height: 74rpx;
				background: $uni-color-primary;
				border-radius: 37rpx;
				@include str(32rpx, 500, #fff);
			}
		}
	}
</style>